<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>检测编码</label>
        <el-input v-model="searchForm.ProjectCode" style="width: 160px;"></el-input>
      </div>
      <div>
        <label>检测名称</label>
        <el-input v-model="searchForm.ProjectCode" style="width: 160px;"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>




    <div class="page-section">
      <div class="page-tool">
        <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">批量删除</el-button>

        <el-dropdown class="mg-l">
          <el-button size="small" type="primary" plain>
            <i class="el-icon-s-grid"></i> 
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="exports"><i class="el-icon-receiving"></i>导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!--数据表格-->
      <el-table :data="tableData" row-key="Id" default-expand-all
        :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }" ref="dataForm" v-loading="isLoading"
        height="calc(100vh - 350px)">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column fixed prop="ProjectCode" label="检测编码"></el-table-column>
        <el-table-column prop="ProjectName" label="检测名称"></el-table-column>
        <el-table-column prop="Classify" label="分类"></el-table-column>
        <el-table-column prop="Creator" label="创作者"></el-table-column>
        <el-table-column prop="CreateTime" label="创建时间"></el-table-column>

        <el-table-column label="操作" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


    </div>

    <!--弹窗-->
    <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
      width="50%" @close="closeDialog">
      <QcProjectClassifyInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible" />
    </el-dialog>
  </div>
</template>

<script>
import QcProjectClassifyInput from './components/QcProjectClassifyInput.vue';
export default {
  components: {
    QcProjectClassifyInput
  },
  data() {
    return {

      //搜索字段
      searchForm: {
        ProjectCode: '',
        ProjectName: '',
      },
      //对话框
      dialogDomain: {
        tiele: '新增检验项目',
        dialogVisible: false
      },
      isUpdate: false,
      //数据模型
      model: {
        ProjectCode: '',//编码
        ProjectName: '',//名称
        Classify:'',//分类
        ParentClassify: 0,//父级id
      },

      isLoading: false,
      tableData: [],
      defaultProps: {
        children: 'Children',
        label: 'ProjectName'
      }
    }
  },
  mounted() {
    this.dataBind();

    window.addEventListener('resize',()=>{
      if(this.$refs.dataForm)
      this.$refs.dataForm.doLayout();
    })
  },
  destroyed(){
    window.removeEventListener('resize',()=>{});
  },
  methods: {
    add() {
      this.dialogDomain.title = "新增检测项目";
      this.dialogDomain.dialogVisible = true;
    },


    dels(){
      if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请先选择一项')
                return;
            }
            this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))

                this.$http.delete('/api/QcProjectClassify/DelAlleeeel',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});     
    },
    del(model) {
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete('/api/QcProjectClassify', {
            data: {
              id: model.Id
            },
            headers: {
              'content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then((res) => {
              this.showNotify('操作成功', 'success');
              this.dataBind();
            })
        }).catch(() => { });
    },
    update(model) {
      console.log(model);
      this.model = model;
      this.isUpdate = true;

      this.dialogDomain.title = "编辑项目";
      this.dialogDomain.dialogVisible = true;
    },


    dataBind() {
      this.loading = true;
      this.$http.get('/api/QcProjectClassify', {
        params: {
          ProjectCode: this.searchForm.ProjectCode,
          ProjectName: this.searchForm.ProjectName,
        }
      })
        .then((res) => {
          this.tableData = res.Data;
          this.loading = false;
        })
    },

    exports(){
      this.$confirm('即将导出报表，是否继续？', '系统提示', {
          confirmButtonText: '导出',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.$http.request({
              method: "GET",
              loading:this.$loading(),
              url: "/api/QcProjectClassify/Export",
              responseType: 'blob'
          }).then((res)=>{
              const blob = new Blob([res])
              const downloadElement = document.createElement('a');
              const href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              downloadElement.download = '检验项目分类信息.xls'; //下载后文件名
              downloadElement.click(); //点击下载
              window.URL.revokeObjectURL(href); //释放掉blob对象
          })
      }).catch((err)=>{
          console.log(err);
      })
    },


    //对话框关闭事件
    closeDialog() {
      this.model = {
        ProjectCode: '',//编码
        ProjectName: '',//名称
        Classify:'',//分类
        ParentClassify: 0,//父级id
      }
    },
    search() {
      this.dataBind();
    },
    reset() {
      this.searchForm.ProjectCode = '';
      this.searchForm.ProjectCode = '';
    },


    //新增编辑页面回调
    callback() {
      this.dialogDomain.dialogVisible = false;

      this.dataBind();
    }
  }
}
</script>

<style scoped></style>